
<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
        <link href="stylesheets\square.css" rel="stylesheet" type="text/css"></link>
		<script type="text/javascript" src="javascripts/jquery.js"></script>
		<script type="text/javascript" src="javascripts/jquery-ui-1.8.9.custom.min.js"></script>
		
        <title> Browser Experiment</title>
		
    </head>

    <body>
    	
        <div id="square1">la</div>
		<script>
		$("#square1").ready(function(ev){
			setTimeout("change_up()",250);
					
		});
		
		function change_up(){
			var i;
			var position = $("#square1").position();
			$("#square1").html(position.left + " " + position.top);
			i = position.left;
			i = i++;
			$("#square1").css({
				"position": "relative",
				"top": i + "px",
				"left": i + "px"
			});
			
			if (position.left < 300) {
				setTimeout("change_up()", 250);
			}else{
				setTimeout("change_down()", 250);
			};
		};
		
		function change_down(){
			var i;
			var position = $("#square1").position();
			$("#square1").html(position.left + " " + position.top);
			i = position.left;
			i = i-20;
			$("#square1").css({
				"position": "relative",
				"top": i + "px",
				"left": i + "px"
			});
			
			if (position.left > 0) {
				setTimeout("change_down()", 250);
			}else{
				setTimeout("change_up()", 250);
			};
		};
		
		</script>
        
    </body>
</html>

